function LevelInfo({ level, attempts, maxAttempts, showAnswer, timeLeft, onToggleHideColors, onShuffleGrid, isHidden }) {
    try {
        const remainingLives = maxAttempts - attempts;
        
        return (
            <div className="text-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg animate-fade-in" data-name="level-info">
                <div className="flex items-center justify-between relative mb-2" data-name="level-header">
                    <div className="flex items-center gap-2" data-name="tools-container">
                        <ThemeToggle />
                        <SoundToggle />
                    </div>

                    <h2 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2 text-gray-900 dark:text-white" data-name="level-title">
                        Level {level}
                    </h2>

                    <div className="flex items-center gap-2" data-name="game-controls">
                        <button
                            onClick={onShuffleGrid}
                            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400"
                            title="Shuffle Grid"
                            data-name="shuffle-button"
                        >
                            <svg 
                                xmlns="http://www.w3.org/2000/svg" 
                                className="h-6 w-6" 
                                fill="none" 
                                viewBox="0 0 24 24" 
                                stroke="currentColor"
                            >
                                <path 
                                    strokeLinecap="round" 
                                    strokeLinejoin="round" 
                                    strokeWidth={2} 
                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                                />
                            </svg>
                        </button>
                        <button
                            onClick={onToggleHideColors}
                            className={`p-2 rounded-full transition-colors ${
                                isHidden ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
                            }`}
                            title={isHidden ? "Show Colors" : "Hide Colors"}
                            data-name="hide-colors-button"
                        >
                            <svg 
                                xmlns="http://www.w3.org/2000/svg" 
                                className="h-6 w-6" 
                                fill="none" 
                                viewBox="0 0 24 24" 
                                stroke="currentColor"
                            >
                                {isHidden ? (
                                    <path 
                                        strokeLinecap="round" 
                                        strokeLinejoin="round" 
                                        strokeWidth={2} 
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                    />
                                ) : (
                                    <path 
                                        strokeLinecap="round" 
                                        strokeLinejoin="round" 
                                        strokeWidth={2} 
                                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                    />
                                )}
                            </svg>
                        </button>
                    </div>
                </div>

                <div className="flex items-center justify-center gap-4 mb-2" data-name="stats-container">
                    <div className="flex items-center gap-1" data-name="lives-container">
                        {[...Array(maxAttempts)].map((_, index) => (
                            <div 
                                key={index}
                                className={`transition-all duration-300 transform ${
                                    index >= remainingLives 
                                        ? 'opacity-30 scale-90' 
                                        : 'opacity-100 scale-100 hover:scale-110'
                                }`}
                                data-name="heart-icon"
                            >
                                <svg 
                                    className={`w-6 h-6 ${
                                        index >= remainingLives 
                                            ? 'text-gray-400 dark:text-gray-600' 
                                            : 'text-red-500 dark:text-red-400'
                                    }`}
                                    fill="currentColor" 
                                    viewBox="0 0 24 24"
                                >
                                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                </svg>
                            </div>
                        ))}
                    </div>
                    {timeLeft !== null && (
                        <div className="flex items-center gap-2" data-name="timer-container">
                            <div className="w-32 bg-gray-200 dark:bg-gray-700 rounded-full h-2" data-name="timer-bar">
                                <div 
                                    className={`h-2 rounded-full transition-all duration-1000 ${
                                        timeLeft <= 3 ? 'bg-red-500 dark:bg-red-600' : 'bg-green-500 dark:bg-green-600'
                                    }`}
                                    style={{ 
                                        width: `${(timeLeft / getTimeLimit(level)) * 100}%`
                                    }}
                                ></div>
                            </div>
                            <span className={`text-sm font-bold ${
                                timeLeft <= 3 ? 'text-red-500 dark:text-red-400' : 'text-green-500 dark:text-green-400'
                            }`} data-name="timer-text">
                                {timeLeft}s
                            </span>
                        </div>
                    )}
                </div>

                {showAnswer && (
                    <p className="text-red-500 dark:text-red-400 mt-2 animate-bounce" data-name="reveal-message">
                        The highlighted color is the different one!
                    </p>
                )}
            </div>
        );
    } catch (error) {
        reportError(error);
        return null;
    }
}
